<script setup>
    import {ref as 响应} from 'vue'

    const 可变 = 响应(false)
    const 大小 = 响应(100)

    const 调整开始 = (索引, 大小) => {
        console.log('调整开始', 索引, 大小)
    }

    const 调整结束 = (索引, 大小) => {
        console.log('调整结束', 索引, 大小)
    }

    const 调整 = (索引, 大小) => {
        console.log('调整', 索引, 大小)
    }
</script>

<template>
    <h1>基础用法</h1>
    <div class="基础用法"
    style="height: 250px;box-shadow: var(--el-border-color-light) 0px 0px 10px;">
        <el-splitter>
            <el-splitter-panel size="30%">
                <div class="面板">1</div>
            </el-splitter-panel>
            <el-splitter-panel :min="200">
                <div class="面板">2</div>
            </el-splitter-panel>
        </el-splitter>
    </div>
    <h1>垂直分布</h1>
    <div class="垂直分布"
    style="height: 250px; box-shadow: var(--el-border-color-light) 0px 0px 10px;">
        <el-splitter layout="vertical">
            <el-splitter-panel>
                <div class="面板">1</div>
            </el-splitter-panel>
            <el-splitter-panel>
                <div class="面板">2</div>
            </el-splitter-panel>
        </el-splitter>
    </div>
    <h1>可折叠</h1>
    <div class="可折叠" style="height: 250px; box-shadow: var(--el-border-color-light) 0px 0px 10px">
        <el-splitter>
            <el-splitter-panel collapsible="" min="50%">
                <div class="面板">1</div>
            </el-splitter-panel>
            <el-splitter-panel collapsible="">
                <div class="面板">2</div>
            </el-splitter-panel>
            <el-splitter-panel collapsible="">
                <div class="面板">3</div>
            </el-splitter-panel>
            <el-splitter-panel collapsible="">
                <el-splitter layout="vertical">
                    <el-splitter-panel collapsible="">
                        <div class="面板">4</div>
                    </el-splitter-panel>
                    <el-splitter-panel collapsible="">
                        <div class="面板">5</div>
                    </el-splitter-panel>
                </el-splitter>
            </el-splitter-panel>
        </el-splitter>
    </div>
    <h1>禁用拖动</h1>
    <el-switch v-model="可变"></el-switch>
    <div style="height: 250px; box-shadow: var(--el-border-color-light) 0px 0px 10px">
        <el-splitter
        @resize-start="调整开始"
        @resize-end="调整结束"
        @resize="调整">
            <el-splitter-panel>
                <div class="面板">1</div>
            </el-splitter-panel>
            <el-splitter-panel>
                <div class="面板">2</div>
            </el-splitter-panel>
            <el-splitter-panel :resizable="可变">
                <div class="面板">可拖动: {{ 可变 ? '是' : '否' }}</div>
            </el-splitter-panel>
            <el-splitter-panel>
                <div class="面板">4</div>
            </el-splitter-panel>
            <el-splitter-panel>
                <div class="面板">5</div>
            </el-splitter-panel>
        </el-splitter>
    </div>
</template>

<style scoped>
    .面板 {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
</style>
